@charset "UTF-8";
.text-singleline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a {
  text-decoration: none !important;
}

p {
  margin: 0;
  padding: 0;
}

.text-twoline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

#bg-backtop:hover #img-backtop {
  content: url("/static/home/img/backtopwhite.png");
}

#bg-wechat:hover #img-wechat {
  content: url("/static/home/img/wechatwhite.png");
}

#bg-weprogram:hover #img-weprogram {
  content: url("/static/home/img/weprogramwhite.png");
}

#bg-backtop:hover, #bg-wechat:hover, #bg-weprogram:hover {
  background-color: #2e83e3 !important;
}

#bg-backtop:hover #text-backtop, #bg-wechat:hover #text-wechat, #bg-weprogram:hover #text-weprogram {
  color: white !important;
}

.text-threeline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

.w1200-father {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 100%;
  background-color: #f5f5f5;
}

.w1200-row {
  width: 1200px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.w1200-col {
  width: 1200px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.w1200-left {
  width: 840px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.w1200-right940 {
  margin-top: 20px;
  width: 940px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.w1200-left table {
  border-collapse: collapse;
}

.w1200-right {
  width: 340px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
}

.w1200-left240 {
  margin-top: 20px;
  width: 240px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

.w1200-crumbs-bg {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
}

.w1200-head-title {
  border-left: 7px solid #2e83e3;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  color: #333;
  font-weight: 500;
  font-size: 22px;
}

.home-select-bg {
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
}

.home-select-item {
  box-sizing: border-box;
  height: 30px;
  border-radius: 4px;
  /*line-height: 30px;*/
  padding: 0 20px;
  color: #666666;
  cursor: pointer;
  background: #f4f4f4;
  margin: 0 20px 20px 0;
  border: 1px solid #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-select-item:hover {
  border: 1px solid #2e83e3;
}

.home-select-item-active {
  background-color: #2e83e3;
  color: white;
}

.home-article-title-fa:hover .home-article-title-ch {
  color: #57b0fb !important;
}

.home-recommend-item {
  height: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 80%;
}

.home-recommend-text {
  padding: 4px 5px;
  background: #f00;
  color: #fff;
  font-size: 12px;
  margin-right: 10px;
  height: 16px;
  line-height: 16px;
}

.home-recommend-title {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #323232;
  width: 85%;
}

.home-recommend-time {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #999;
}

.hr-dashed {
  border-bottom: 1px dashed #ddd;
  height: 1px;
  width: 100%;
  border-left: none;
  border-top: none;
  border-right: none;
}

.home-article-title-left {
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 70%;
}

.home-article-title-left div {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #555;
  width: 100%;
}

.home-article-title-right {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #999;
}

.home-img-cover {
  background-size: cover;
  background-position: center center;
}

.in-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.in-nav .in-nav-item {
  height: 40px;
  padding: 0 20px;
  position: relative;
  line-height: 40px;
  font-size: 18px;
  color: #8b8b8b;
  cursor: pointer;
}

.in-nav .active {
  color: #2e83e3;
  font-weight: bold;
}

.in-nav .in-nav-item .in-nav-mask {
  height: 40px;
  position: absolute;
  width: 30%;
  bottom: 0;
  left: 35%;
}

.in-nav .in-nav-item .active {
  border-bottom: 2px solid #2e83e3;
}

.home-universal-type-title {
  border-left: 7px solid #57b0fb;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  color: #333333;
  font-weight: 500;
  font-size: 22px;
  width: 100%;
}

.home-universal-type-bg {
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}

.home-universal-type-item {
  border: 1px solid #f4f4f4;
  height: 30px;
  border-radius: 4px;
  line-height: 30px;
  padding: 0 10px;
  color: #666666;
  cursor: pointer;
  background: #f4f4f4;
  margin: 0 10px 10px 0;
}

.home-universal-type-item:hover {
  box-sizing: border-box;
  border: 1px solid #2e83e3;
  color: #333333;
}

.home-universal-type-item-active {
  background-color: #2e83e3;
  color: white;
}

.home-module-title-father-father {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.home-module-title-father-click {
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 100px;
  height: 26px;
  line-height: 26px;
  background-color: #2e83e3;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.home-module-title-father-bottom {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 40px;
  border-bottom: 1px solid #f2f2f2;
}

.home-module-title-father-bottom-content {
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 24px;
  color: #999;
  font-size: 12px;
}

.home-module-title-father-bottom2 {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
}

.home-module-title-father-bottom-content2 {
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 24px;
  color: #999;
  font-size: 12px;
}

.home-module-title-father {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  cursor: pointer;
  width: 100%;
}

.home-module-title-child:hover {
  color: #57b0fb !important;
}

.home-module-title-father-left {
  height: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 70%;
}

.home-module-title-child-tui-flag {
  padding: 4px 5px;
  background: #ff0000;
  color: #fff;
  font-size: 12px;
  margin-right: 10px;
  height: 16px;
  line-height: 16px;
}

.home-module-title-child-tui {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #323232;
  width: 85%;
}

.home-module-title-child {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #555;
  width: 100%;
}

.home-module-title-child-time {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #999;
}

.course-teacher-jieshao {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.course-teacher-jieshao .teacher-page-item {
  cursor: pointer;
  margin-bottom: 20px;
  width: 100%;
  height: 260px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: all .5s;
  display: flex;
  flex-direction: row;
}

.course-teacher-jieshao .teacher-page-item .teacher-page-img {
  width: 190px;
  height: 260px;
  background-repeat: no-repeat;
  background-size: cover;
}

.course-teacher-jieshao .teacher-page-item .teacher-page-content {
  width: 610px;
  height: 260px;
  box-sizing: border-box;
  padding: 20px;
  color: #333;
}

.course-teacher-jieshao .teacher-page-item .teacher-page-content .teacher-page-name {
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
}

.course-teacher-jieshao .teacher-page-item .teacher-page-content .teacher-page-name span {
  font-size: 20px;
  color: #999;
  font-weight: normal;
}

.course-teacher-jieshao .teacher-page-item .teacher-page-content .teacher-page-zj {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  overflow: hidden;
}

.course-teacher-jieshao .teacher-page-item .teacher-page-content .teacher-page-des {
  display: block;
  height: 105px;
  overflow: hidden;
  margin-top: 10px;
  line-height: 35px;
  font-size: 16px;
  color: #999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-align: left;
}

.course-teacher-jieshao .teacher-page-item:hover {
  transform: translateY(-10px);
}

.teacher-detail-video-bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.teacher-detail-video-bg .bg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.teacher-detail-video-bg .bg .video-bg {
  width: 800px;
  height: 600px;
  max-width: calc(100% - 120px);
  max-height: calc(100% - 120px);
  position: relative;
}

.teacher-detail-video-bg .bg .video-bg .close-bg {
  width: 48px;
  height: 48px;
  cursor: pointer;
  position: absolute;
  right: -12px;
  top: -60px;
}

.teacher-detail-bg {
  width: 100%;
}

.teacher-detail-bg .teacher-detail-name {
  width: 100%;
  font-size: 26px;
  color: #404040;
  letter-spacing: -.11px;
  text-align: left;
}

.teacher-detail-bg .teacher-detail-zj {
  margin-top: 8px;
  font-size: 14px;
  color: #888;
  letter-spacing: -.15px;
  text-align: left;
}

.teacher-detail-bg .teacher-detail-line {
  margin-top: 8px;
  width: 100%;
  height: 1px;
  background: #e5e5e5;
  margin-top: 12px;
}

.teacher-detail-bg .teacher-detail-content {
  margin-top: 34px;
  padding: 24px 31px;
  background: #f6f6f6;
  font-size: 14px;
  color: #888;
  letter-spacing: 0;
  line-height: 26px;
  border-radius: 25px 0;
  margin-bottom: 45px;
}

.teacher-detail-bg .teacher-detail-title-line {
  border-left: 7px solid #57b0fb;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  color: #333333;
  font-weight: 500;
  font-size: 22px;
  width: 100%;
}

.teacher-detail-bg .teacher-detail-shiting-line {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px;
}

.teacher-detail-bg .teacher-detail-shiting-line img {
  width: 380px;
  height: 190px;
  cursor: pointer;
  border-radius: 14px;
}

.teacher-detail-bg .teacher-detail-shiting-line2 {
  width: 100%;
  height: 500px;
  margin: 20px 0;
}

.teacher-page-bg {
  margin: 40px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.teacher-page-bg .teacher-page-item {
  cursor: pointer;
  margin-bottom: 50px;
  width: 580px;
  height: 335px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: all .5s;
  display: flex;
  flex-direction: row;
}

.teacher-page-bg .teacher-page-item .teacher-page-img {
  width: 235px;
  height: 335px;
  background-repeat: no-repeat;
  background-size: cover;
}

.teacher-page-bg .teacher-page-item .teacher-page-content {
  width: 345px;
  height: 335px;
  box-sizing: border-box;
  padding: 20px 50px 0 50px;
  color: #333;
}

.teacher-page-bg .teacher-page-item .teacher-page-content .teacher-page-name {
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
}

.teacher-page-bg .teacher-page-item .teacher-page-content .teacher-page-zj {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  overflow: hidden;
}

.teacher-page-bg .teacher-page-item .teacher-page-content .teacher-page-style {
  padding: 0 0 0  6px;
  line-height: 24px;
  font-size: 18px;
  font-weight: bold;
  color: #027DC3;
}

.teacher-page-bg .teacher-page-item .teacher-page-content .teacher-page-style:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  background: url("/static/home/img/teacher_icon_style.png") no-repeat center;
}

.teacher-page-bg .teacher-page-item .teacher-page-content .teacher-page-des {
  display: block;
  height: 105px;
  overflow: hidden;
  margin-top: 10px;
  line-height: 35px;
  font-size: 16px;
  color: #999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-align: left;
}

.teacher-page-bg .teacher-page-item:hover {
  transform: translateY(-10px);
}

.teacher-page-bg .teacher-page-item:nth-child(2n+1) {
  margin-right: 40px;
}

.bread-nav {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bread-nav .bread-head-img {
  height: 20px;
  width: 20px;
  margin-right: 5px;
}

.bread-nav .bread-head-title {
  color: #999;
  font-size: 12px;
}

.bread-nav .bread-head-content {
  color: #333333;
  font-size: 12px;
}

.article-gloab {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.article-gloab .article-gloab-detail-title {
  width: 100%;
  padding: 10px 0px;
}

.article-gloab .article-gloab-from {
  font-size: 12px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  color: #999;
}

.article-gloab .article-gloab-from span {
  color: #2e83e3;
  cursor: pointer;
  position: relative;
}

.article-gloab .article-gloab-from span div {
  display: none;
  width: 180px;
  height: 180px;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 20px;
  background-color: #fff;
}

.article-gloab .article-gloab-from span:hover div {
  display: block;
}

.article-gloab .article-gloab-xcxsuipian {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 20px 5px #ddd;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  margin: 20px 0;
  padding: 20px;
  justify-content: space-between;
}

.article-gloab .article-gloab-xcxsuipian .imgline {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-gloab .article-gloab-xcxsuipian .imgline .ititle {
  width: 100%;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  font-size: 18px;
  color: #3173FF;
}

.article-gloab .article-gloab-xcxsuipian .imgline .qrcode {
  width: 160px;
  height: 160px;
}

.article-gloab .article-gloab-xcxsuipian .imgline .iftitle {
  width: 100%;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
  color: #333;
}

.article-gloab .article-gloab-xcxsuipian .imgline .iftitle a {
  color: #3173FF;
  text-decoration: none;
  font-weight: bold;
}

.article-gloab .article-gloab-xcxsuipian .itemline {
  width: 240px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
}

.article-gloab .article-gloab-xcxsuipian .itemline .item {
  height: 46px;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 0 4px 1px #ddd;
  width: 100%;
  padding: 3px 10px;
  text-decoration: none;
  transition: all .5s;
  cursor: pointer;
  margin: 15px 0;
}

.article-gloab .article-gloab-xcxsuipian .itemline .item p {
  width: 100%;
  background: radial-gradient(#F8EBD0, #FFFFFF, #FFFFFF);
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  color: #333;
}

.article-gloab .article-gloab-xcxsuipian .itemline .item:hover {
  transform: translateY(-10px);
}

.article-gloab .article-gloab-zhaiyao {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 20px 5px #ddd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 20px 0;
}

.article-gloab .article-gloab-zhaiyao .line-title {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
}

.article-gloab .article-gloab-zhaiyao .line-title .left {
  width: 120px;
  height: 40px;
  background-color: #3173FF;
  border-radius: 10px 0 10px 0;
  box-sizing: border-box;
  padding: 0 10px;
}

.article-gloab .article-gloab-zhaiyao .line-title .left p {
  width: 100%;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  font-weight: bold;
  color: #fff;
}

.article-gloab .article-gloab-zhaiyao .line-title .mid {
  height: 41px;
  box-sizing: border-box;
  border-bottom: 1px solid #3173FF;
  padding: 0 10px;
  line-height: 40px;
  font-weight: bold;
  font-size: 16px;
  color: #3173FF;
}

.article-gloab .article-gloab-zhaiyao .line-title .right {
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 40px;
  font-size: 16px;
  color: #333;
}

.article-gloab .article-gloab-zhaiyao .line-title .right span {
  color: red;
  font-weight: bold;
}

.article-gloab .article-gloab-zhaiyao .line-riqi {
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0 40px;
}

.article-gloab .article-gloab-zhaiyao .line-riqi p {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}

.article-gloab .article-gloab-zhaiyao .line-riqi p .title {
  font-weight: bold;
  color: #333;
}

.article-gloab .article-gloab-zhaiyao .line-riqi p .text {
  color: red;
}

.article-gloab .article-gloab-title2 {
  border-bottom: 1px dashed #ddd;
  height: 10px;
  width: 100%;
  border-left: none;
  border-top: none;
  border-right: none;
  margin: 0;
}

.article-gloab .article-gloab-content {
  width: 100%;
  padding: 10px 0;
  min-width: 840px;
  max-width: 1240px;
  font-size: 14px;
}

.article-gloab .article-gloab-content p {
  word-break: break-word;
}

.article-gloab .article-gloab-content table {
  max-width: 100%;
  border-collapse: collapse;
}

.xdm-zw-bg {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.xdm-zw-bg .info-bg {
  width: 100%;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.xdm-zw-bg .info-bg .all-label-bg {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #dfdfdf;
}

.xdm-zw-bg .info-bg .all-label-bg .vertical-bar {
  height: 20px;
  width: 5px;
  background-color: #007cc2;
}

.xdm-zw-bg .info-bg .all-label-bg .mytitle {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  color: #007cc2;
  font-size: 16px;
  margin-right: 20px;
}

.xdm-zw-bg .info-bg .all-label-bg .item {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.xdm-zw-bg .info-bg .all-label-bg .item .title {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding: 0 5px;
  line-height: 30px;
  font-size: 14px;
  color: #545454;
  background-color: #E0EEFF;
}

.xdm-zw-bg .info-bg .all-label-bg .item .city {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.xdm-zw-bg .info-bg .all-label-bg .item .city .item {
  height: 26px;
  padding: 0 20px;
  background-color: #2e83e3;
  color: white;
  line-height: 26px;
  margin: 0 5px 5px 0;
  width: auto;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.xdm-zw-bg .info-bg .citylistbg {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.xdm-zw-bg .info-bg .citylistbg .bg {
  width: 100%;
  max-width: 1200px;
  background-color: white;
  box-sizing: border-box;
  padding: 4px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.xdm-zw-bg .info-bg .citylistbg .bg .item {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.xdm-zw-bg .info-bg .citylistbg .bg .item .title:hover {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding: 0 5px;
  line-height: 30px;
  font-size: 14px;
  color: #fff;
  background-color: #2e83e3;
}

.xdm-zw-bg .info-bg .citylistbg .bg .item .title:hover a {
  color: #fff !important;
}

.xdm-zw-bg .info-bg .citylistbg .bg .item .title {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding: 0 5px;
  line-height: 30px;
  font-size: 14px;
  color: #545454;
  background-color: #f2f2f2;
}

.xdm-zw-bg .info-bg .citylistbg .bg .item .city {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.xdm-zw-bg .info-bg .citylistbg .bg .item .city .item {
  height: 26px;
  padding: 0 20px;
  background-color: #2e83e3;
  color: white;
  line-height: 26px;
  margin: 0 5px 5px 0;
  width: auto;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.xdm-zw-bg .xdm-zw-item {
  width: 45%;
  position: relative;
  cursor: pointer;
  margin-bottom: 20px;
  margin-right: 40px;
  border-radius: 10px;
}

.xdm-zw-bg .xdm-zw-item img {
  border-radius: 10px;
  width: 100%;
}

.xdm-zw-bg .xdm-zw-item .title {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}

.course-top-bg {
  background-color: white;
  padding: 0 20px 45px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.course-top-bg .course-top-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.course-top-bg .course-top-content .left {
  width: 530px;
  height: 380px;
  display: flex;
  flex-direction: column;
}

.course-top-bg .course-top-content .left img {
  width: 530px;
  height: 350px;
  object-fit: cover;
}

.course-top-bg .course-top-content .left .bottom {
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.course-top-bg .course-top-content .left .bottom img {
  height: 14px;
  width: 17px;
  object-fit: cover;
  margin-bottom: 1px;
  margin-right: 5px;
}

.course-top-bg .course-top-content .left .bottom p {
  font-size: 14px;
  height: 15px;
  line-height: 15px;
  color: #999999;
}

.course-top-bg .course-top-content .right {
  width: 580px;
  height: 380px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.course-top-bg .course-top-content .right .zixun {
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.course-top-bg .course-top-content .right .zixun img {
  height: 14px;
  width: 17px;
  object-fit: cover;
  margin-bottom: 1px;
  margin-right: 5px;
}

.course-top-bg .course-top-content .right .zixun p {
  font-size: 14px;
  height: 15px;
  line-height: 15px;
  color: #999999;
}

.course-top-bg .course-top-content .right .buybtn {
  width: 130px;
  height: 40px;
  background-image: linear-gradient(92deg, #ff701a 0%, #ffbb18 100%), linear-gradient(#ff701a, #ff701a);
  background-blend-mode: normal,
 normal;
  border-radius: 4px;
  bottom: 0;
  left: 20px;
  position: absolute;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

.course-top-bg .course-top-content .right .title {
  line-height: 45px;
  letter-spacing: 1px;
  color: #333333;
  font-size: 28px;
}

.course-top-bg .course-top-content .right .time {
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  letter-spacing: 1px;
  color: #333333;
  margin: 2px 0;
}

.course-top-bg .course-top-content .right .price {
  margin-top: 10px;
  height: 50px;
  background-color: #f5f8fa;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding-left: 30px;
  font-size: 14px;
  color: #666666;
}

.course-top-bg .course-top-content .right .price .list {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20px;
}

.course-top-bg .course-top-content .right .pricese {
  height: 60px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 30px;
  color: #666666;
  font-size: 14px;
  flex-direction: row;
  flex-wrap: wrap;
}

.course-top-bg .course-top-content .right .pricese .item {
  height: 24px;
  background-color: #f7f7f7;
  border-radius: 3px;
  line-height: 24px;
  padding: 0 8px;
  font-size: 12px;
  color: #9e9e9e;
  margin-left: 12px;
  cursor: pointer;
  box-sizing: border-box;
  border: solid 1px #f7f7f7;
}

.course-top-bg .course-top-content .right .pricese .active {
  border: solid 1px #48a0ff;
}

.course-top-bg .course-top-content .right .tese {
  height: 30px;
  font-size: 12px;
  color: #999999;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  padding-left: 20px;
  margin-bottom: 8px;
}

.recommend-course {
  width: 320px;
  display: flex;
  flex-direction: column;
}

.recommend-course .course-list-bg {
  margin-top: 20px;
  width: 320px;
  background-color: white;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
}

.recommend-course .course-list-bg .text {
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  letter-spacing: 1px;
  color: #666666;
}

.recommend-course .course-list-bg .line {
  height: 1px;
  background-color: #dadada;
  margin-top: 15px;
}

.recommend-course .course-list-bg .list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.recommend-course .course-list-bg .list .item {
  height: 75px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

.recommend-course .course-list-bg .list .item img {
  height: 75px;
  width: 135px;
}

.recommend-course .course-list-bg .list .item .content {
  height: 75px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 10px;
}

.recommend-course .course-list-bg .list .item .content p {
  padding: 5px 0;
  line-height: 20px;
  font-size: 14px;
  color: #333333;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.recommend-course .course-list-bg .list .item .content .price {
  display: flex;
  flex-direction: row;
  height: 25px;
  align-items: center;
}

.recommend-course .code-bg {
  width: 320px;
  height: 370px;
  background-color: white;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
}

.recommend-course .code-bg .text {
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  letter-spacing: 1px;
  color: #666666;
}

.recommend-course .code-bg .line {
  height: 1px;
  background-color: #dadada;
  margin-top: 15px;
}

.recommend-course .code-bg .code {
  width: 280px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recommend-course .code-bg .code img {
  height: 200px;
  width: 200px;
}

.recommend-course .code-bg p {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  color: #333333;
}

.usercenter-content-bg {
  width: 100%;
}

.usercenter-content-bg .address-bg {
  width: 100%;
  border-top: 1px solid #2e83e3;
  margin-top: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px dashed #bfbfbf;
  box-sizing: border-box;
}

.usercenter-content-bg .address-bg .itembg {
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.usercenter-content-bg .address-bg .itembg .item {
  padding: 0 10px;
  height: 130px;
  width: 270px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px dashed #e5e5e5;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
}

.usercenter-content-bg .address-bg .itembg .item .address {
  width: 100%;
  padding: 0 13px;
  border-bottom: 1px solid #d2d2d2;
  line-height: 40px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usercenter-content-bg .address-bg .itembg .item .addtool {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 5px;
}

.usercenter-content-bg .address-bg .itembg .item .addtool .change {
  display: flex;
  flex-direction: row;
}

.usercenter-content-bg .address-bg .itembg .item .addtool .change img {
  height: 16px;
  width: 16px;
}

.usercenter-content-bg .address-bg .itembg .item .addtool .change p {
  font-size: 14px;
  color: #8b572a;
  line-height: 16px;
}

.usercenter-content-bg .address-bg .itembg .item .addtool .setdefault {
  color: #ff3f47;
  margin-left: 17px;
  font-size: 14px;
  line-height: 16px;
}

.usercenter-content-bg .address-bg .itembg .item .defaultTip {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 20px;
  line-height: 20px;
  background: black;
  border-radius: 0px 5px 0px 0px;
  opacity: 0.75;
  z-index: 9;
  filter: alpha(opacity=20);
  color: #fff;
  text-align: center;
}

.usercenter-content-bg .address-bg .itembg .add-address {
  line-height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  height: 130px;
  width: 270px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px dashed #e5e5e5;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.usercenter-content-bg .usercenter-cu {
  width: 400px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.usercenter-content-bg .usercenter-cu .usercenter-cu-userhead {
  height: 80px;
  width: 80px;
  border-radius: 40px;
  box-shadow: 0 0 20px -5px #ddd;
}

.usercenter-content-bg .usercenter-content-userinfo {
  display: flex;
  flex-direction: row;
  height: 120px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px dashed #ddd;
  align-items: center;
}

.usercenter-content-bg .usercenter-content-userinfo .usercenter-content-userinfo-head {
  height: 80px;
  width: 80px;
  border-radius: 40px;
  box-shadow: 0 0 20px -5px #ddd;
}

.usercenter-content-bg .usercenter-content-userinfo .usercenter-content-userinfo-line {
  height: 80px;
}

.usercenter-content-bg .usercenter-content-userinfo .usercenter-content-userinfo-line .usercenter-content-userinfo-line2 {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.usercenter-content-bg .usercenter-content-userinfo .usercenter-content-userinfo-line .usercenter-content-userinfo-line2 .usercenter-content-userinfo-username {
  margin-left: 40px;
  line-height: 40px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.usercenter-content-bg .usercenter-content-userinfo .usercenter-content-userinfo-line .usercenter-content-userinfo-line2 .usercenter-content-userinfo-phone {
  margin-left: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333;
}

.usercenter-content-bg .usercenter-content-selectitem {
  width: 100%;
  padding: 40px  20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.usercenter-content-bg .usercenter-content-selectitem .usercenter-content-item:nth-child(4n+4) {
  margin-right: 0 !important;
}

.usercenter-content-bg .usercenter-content-selectitem .gcolor1 {
  background: #2193b0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2193b0, #6dd5ed);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2193b0, #6dd5ed);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.usercenter-content-bg .usercenter-content-selectitem .gcolor2 {
  background: #00b09b;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #00b09b, #96c93d);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #00b09b, #96c93d);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.usercenter-content-bg .usercenter-content-selectitem .gcolor3 {
  background: #00d2ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #00d2ff, #3a7bd5);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #00d2ff, #3a7bd5);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.usercenter-content-bg .usercenter-content-selectitem .gcolor4 {
  background: #7474bf;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #7474bf, #348ac7);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #7474bf, #348ac7);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.usercenter-content-bg .usercenter-content-selectitem .gcolor5 {
  background: #56ccf2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #56ccf2, #2f80ed);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #56ccf2, #2f80ed);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.usercenter-content-bg .usercenter-content-selectitem .gcolor6 {
  background: #4cb8c4;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #4cb8c4, #3cd3ad);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #4cb8c4, #3cd3ad);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.usercenter-content-bg .usercenter-content-selectitem .gcolor7 {
  background: #7f7fd5;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.usercenter-content-bg .usercenter-content-selectitem .usercenter-content-item {
  cursor: pointer;
  border-radius: 10px;
  width: 250px;
  height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 40px;
  background-color: #0B9BEC;
  margin-bottom: 40px;
}

.usercenter-content-bg .usercenter-content-selectitem .usercenter-content-item img {
  height: 40px;
  width: 40px;
}

.usercenter-content-bg .usercenter-content-selectitem .usercenter-content-item p {
  margin: 0 0 0 20px;
  padding: 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
}

.change-address-bg {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.change-address-bg .add-win {
  width: 700px;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: white;
  border-radius: 15px;
}

.change-address-bg .add-win .title {
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
}

.change-address-bg .add-win .line {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0 23px;
  box-sizing: border-box;
  margin-top: 15px;
}

.change-address-bg .add-win .line .submit {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  background: #2e83e3;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  letter-spacing: 2px;
}

.change-address-bg .add-win .line .textareaText {
  float: left;
  width: 100%;
  height: 120px;
  line-height: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  resize: none;
}

.change-address-bg .add-win .line .inputText {
  float: left;
  width: 550px;
  height: 36px;
  line-height: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  box-sizing: border-box;
}

.change-address-bg .add-win .line .label {
  width: 80px;
  height: 36px;
  line-height: 36px;
  float: left;
  padding-right: 10px;
  font-size: 14px;
}

.change-address-bg .add-win .line .cityse {
  width: 170px;
  height: 36px;
  border-radius: 2px;
  border: 1px solid #cccccc;
  float: left;
  margin-right: 12px;
  font-size: 14px;
  color: #333;
}

.change-address-bg .add-win .close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  background: url("/static/home/img/close.png") no-repeat center;
  background-size: 13px 12px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
}

.xdm-home-left-nav:hover {
  width: 70px !important;
}

.xdm-home-left-nav:hover .title {
  height: 70px !important;
  width: 70px !important;
  padding: 10px !important;
}

.xdm-home-left-nav:hover .item {
  display: flex !important;
}

.xdm-home-left-nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0px 7px 40px 0px rgba(212, 213, 214, 0.36);
  color: #fff;
  font-weight: bold;
  width: 50px;
  transition-duration: 500ms;
}

.xdm-home-left-nav .title {
  width: 50px;
  height: 50px;
  line-height: 22px;
  padding: 2px;
  font-size: 18px;
  color: #FFFFFF;
  background: #2e83e3;
  box-sizing: border-box;
  text-align: center;
  transition-duration: 500ms;
}

.xdm-home-left-nav .item {
  cursor: pointer;
  box-sizing: border-box;
  display: none;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 2px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  border-top: 1px dashed rgba(173, 173, 173, 0.5);
  text-align: center;
  transition-duration: 500ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xdm-home-right-nav2 {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  right: 0;
  top: calc(50% - 81px);
  z-index: 9999;
}

.xdm-home-right-nav2 .wbg {
  width: 54px;
  height: 54px;
  position: relative;
}

.xdm-home-right-nav2 .wbg .content {
  position: absolute;
  right: 0;
  top: 0;
  width: auto !important;
}

.xdm-home-right-nav2 .wbg .content .item:hover {
  width: 124px !important;
  background-color: #2E83E3 !important;
  overflow: visible;
}

.xdm-home-right-nav2 .wbg .content .item {
  cursor: pointer;
  width: 54px;
  height: 54px;
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition-duration: 500ms;
  align-items: center;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel {
  width: 358px;
  position: absolute;
  left: -358px;
  top: -100px;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg {
  width: 358px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg .xline {
  width: 100%;
  height: 1px;
  background-color: #ddd;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg .iitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg .iitem .qrcode {
  width: 80px;
  height: 80px;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg .iitem .right {
  display: flex;
  flex-direction: column;
  height: 64px;
  padding-left: 10px;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg .iitem .right .rtop {
  height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg .iitem .right .rtop .name {
  margin-right: 10px;
  font-size: 12px;
  color: #333;
  line-height: 16px;
}

.xdm-home-right-nav2 .wbg .content .item .infopanel .infobg .iitem .right .rtop .name span {
  font-size: 12px;
  color: #007cc2;
  line-height: 16px;
}

.xdm-home-right-nav2 .wbg .content .item .imgbg {
  width: 54px;
  height: 54px;
  padding: 7px;
  box-sizing: border-box;
}

.xdm-home-right-nav2 .wbg .content .item .imgbg img {
  width: 40px;
  height: 40px;
}

.xdm-home-right-nav2 .wbg .content .item .textbg {
  width: 70px;
}

.xdm-home-right-nav2 .wbg .content .item .textbg p {
  width: 70px;
  font-size: 14px;
  color: #fff;
}

.xdm-home-right-nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  right: 20px;
  top: calc(50% - 75px);
  z-index: 999;
}

.xdm-home-right-nav .kefu {
  background-color: #2e83e3;
  box-shadow: 0 0 15px 1px #DDDDDD;
  height: 70px;
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
}

.xdm-home-right-nav .kefu .kefu-content {
  width: 133px;
  height: 424px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid #2F90FF;
  flex-direction: column;
  background: white;
  position: absolute;
  left: -160px;
  top: 0;
  display: none;
}

.xdm-home-right-nav .kefu .kefu-content .item {
  width: 100%;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 0;
}

.xdm-home-right-nav .kefu .kefu-content .item .name {
  width: 90px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  background: linear-gradient(to bottom, #86B7FA, #3B91FF);
}

.xdm-home-right-nav .kefu .kefu-content .item .wechat {
  height: 80px;
  width: 80px;
  object-fit: contain;
}

.xdm-home-right-nav .kefu .kefu-content .item .lxfs {
  width: 100%;
  text-align: center;
  line-height: 15px;
  height: 30px;
  font-size: 12px;
  color: #333;
}

.xdm-home-right-nav .kefu:hover .kefu-content-show {
  display: flex !important;
}

.xdm-home-right-nav .img {
  height: 40px;
  width: 40px;
}

.xdm-home-right-nav .mtitle {
  width: 70px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
  text-align: center;
}

.xdm-about-kaike {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.xdm-about-kaike .pagediv {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.xdm-about-kaike .itembg {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 30px 10px;
}

.xdm-about-kaike .itembg .item:nth-child(4n+1) {
  margin-left: 0px !important;
}

.xdm-about-kaike .itembg .item {
  width: 210px;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin-left: 20px;
}

.xdm-about-kaike .itembg .item .imgbox {
  width: 210px;
  height: 170px;
  overflow: hidden;
  /* 超出容器的图片部分裁剪掉 */
  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  box-sizing: border-box;
  /* 防止padding影响容器尺寸 */
}

.xdm-about-kaike .itembg .item .imgbox img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.xdm-about-kaike .itembg .item .title {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  color: #333;
  text-align: center;
  line-height: 20px;
}

.xdm-about-kaiban {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.xdm-about-kaiban .pagediv {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.xdm-about-kaiban .itembg {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 30px 10px;
}

.xdm-about-kaiban .itembg .item:nth-child(4n+1) {
  margin-left: 0px !important;
}

.xdm-about-kaiban .itembg .item {
  width: 210px;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin-left: 20px;
}

.xdm-about-kaiban .itembg .item .imgbox {
  width: 210px;
  height: 170px;
  overflow: hidden;
  /* 超出容器的图片部分裁剪掉 */
  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  box-sizing: border-box;
  /* 防止padding影响容器尺寸 */
}

.xdm-about-kaiban .itembg .item .imgbox img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.xdm-about-kaiban .itembg .item2:nth-child(3n+1) {
  margin-left: 0px !important;
}

.xdm-about-kaiban .itembg .item2 {
  width: 250px;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin-left: 22px;
}

.xdm-about-kaiban .itembg .item2 .imgbox {
  width: 250px;
  height: 200px;
  overflow: hidden;
  /* 超出容器的图片部分裁剪掉 */
  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  box-sizing: border-box;
  /* 防止padding影响容器尺寸 */
}

.xdm-about-kaiban .itembg .item2 .imgbox img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.xdm-left-about {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: white;
}

.xdm-left-about .top {
  width: 100%;
  background-color: #027DC3;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
}

.xdm-left-about .top p {
  background: url("/static/home/img/home_icon_about.png") no-repeat;
  background-size: 100% 100%;
  width: 177px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.xdm-left-about .item {
  width: 100%;
  height: 86px;
  cursor: pointer;
  background: url("/static/home/img/home_icon_about2.png") no-repeat bottom center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.xdm-left-about .item a {
  width: 180px;
  height: 86px;
  font-size: 20px;
  color: #777;
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.xdm-left-about .item a i {
  margin-right: 20px;
  font-size: 28px !important;
  color: #999;
}

.xdm-left-about .item:hover {
  color: #027DC3 !important;
}

.xdm-left-about .item:hover a {
  color: #027DC3 !important;
}

.xdm-left-about .item:hover a i {
  color: #FF7500 !important;
}

.xdm-left-about .curitem {
  color: #027DC3 !important;
}

.xdm-left-about .curitem a {
  color: #027DC3 !important;
}

.xdm-left-about .curitem a i {
  color: #FF7500 !important;
}

.xdm-right-tui {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  background: white;
}

.xdm-right-tui .kefu-img {
  width: 100%;
}

.xdm-right-tui .course-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.xdm-right-tui .course-list .item {
  width: 49%;
  cursor: pointer;
  margin-bottom: 8px;
}

.xdm-right-tui .title-line {
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
  height: 40px;
  padding: 10px 0;
  box-sizing: border-box;
}

.xdm-right-tui .title-line .title {
  padding: 0 0 0 10px;
  margin: 0;
  height: 20px;
  line-height: 20px;
  border-left: 3px solid #57b0fb;
  font-size: 18px;
  color: #666;
}

.xdm-right-tui .info-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.xdm-right-tui .info-list .info-title {
  line-height: 25px;
  font-size: 14px;
  color: #333;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.xdm-right-tui .teacher-list {
  width: 100%;
}

.xdm-right-tui .teacher-list .teacher-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 150px;
  margin: 10px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.xdm-right-tui .teacher-list .teacher-item .teacher-img-bg {
  width: 110px;
  height: 150px;
  overflow-y: hidden;
}

.xdm-right-tui .teacher-list .teacher-item .teacher-img-bg .teachger-img {
  width: 110px;
}

.xdm-right-tui .teacher-list .teacher-item .teacher-info {
  width: 210px;
  height: 150px;
  display: flex;
  box-sizing: border-box;
  padding-left: 20px;
  justify-content: center;
  flex-direction: column;
}

.xdm-right-tui .teacher-list .teacher-item .teacher-info .name {
  line-height: 30px;
  font-weight: 500;
  color: #333;
  font-size: 16px;
  padding: 0;
  margin: 0;
}

.xdm-right-tui .teacher-list .teacher-item .teacher-info .name span {
  color: #999;
  font-size: 14px;
  font-weight: 500;
}

.xdm-right-tui .teacher-list .teacher-item .teacher-info .other-info {
  line-height: 25px;
  color: #666;
  font-size: 14px;
  padding: 0;
  margin: 0;
}

.xdm-sitemap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.xdm-sitemap .item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.xdm-sitemap .item .title-line {
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
  height: 40px;
  padding: 10px 0;
  box-sizing: border-box;
}

.xdm-sitemap .item .title-line .title {
  padding: 0 0 0 10px;
  margin: 0;
  height: 20px;
  line-height: 20px;
  border-left: 3px solid #57b0fb;
  font-size: 18px;
  color: #666;
}

.xdm-sitemap .item .item-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.xdm-sitemap .item .item-list a {
  text-decoration: none;
  font-size: 14px;
  color: #333;
  line-height: 30px;
  padding: 0 20px;
  cursor: pointer;
}

.footer-copyright {
  padding-top: 25px;
  height: 30px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: #313131;
  min-width: 1200px;
}

.footer-copyright a {
  color: white;
}

.header-nav-commen-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: #eaeaea;
  box-sizing: border-box;
  width: 100%;
  min-width: 1200px;
}

.header-nav-commen-title .header-nav-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 1200px;
}

.header-nav-commen-title .header-nav-center .left {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.header-nav-commen-title .header-nav-center .left .item:hover .showbg {
  display: block !important;
}

.header-nav-commen-title .header-nav-center .left .item {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  margin-right: 20px;
}

.header-nav-commen-title .header-nav-center .left .item .showbg {
  display: none;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  left: -10px;
  top: 35px;
  z-index: 100;
}

.header-nav-commen-title .header-nav-center .left .item .showbg img {
  width: 130px;
  height: 130px;
}

.header-nav-commen-title .header-nav-center .left .item .iconimg {
  width: 20px;
  height: 20px;
}

.header-nav-commen-title .header-nav-center .left .item p {
  padding-left: 8px;
  color: #333;
  font-size: 12px;
}

.header-nav-commen-title .header-nav-center .right-login {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
}

.header-nav-commen-title .header-nav-center .right-login .telbg {
  display: flex;
  flex-direction: row;
  height: 50px;
  align-items: center;
  margin-right: 20px;
}

.header-nav-commen-title .header-nav-center .right-login .telbg .telimg {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

.header-nav-commen-title .header-nav-center .right-login .telbg .teltext {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  color: #027DC3;
  line-height: 36px;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg {
  display: flex;
  flex-direction: row;
  color: #666666;
  font-size: 12px;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg a {
  font-size: 12px;
  color: #666666;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right {
  height: 37px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right .headbg {
  height: 35px;
  width: 35px;
  border: 1px solid #2e83e3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right .headbg .head {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right .itembg {
  display: none;
  position: absolute;
  width: 100px;
  top: 35px;
  left: 20px;
  box-shadow: 0 0 15px 1px #EEEEEE;
  background-color: white;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px 20px;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right .itembg .item {
  height: 25px;
  line-height: 25px;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right .itembg .item a {
  font-size: 12px;
  color: #666666;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right .itembg .item a:hover {
  color: #2e83e3;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .right:hover .itembg {
  display: block;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .username {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #666666;
  margin-left: 10px;
}

.header-nav-commen-title .header-nav-center .right-login .loginbg .username:hover {
  color: #2e83e3;
}

.header-nav-commen-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 70px;
  background-color: #fff;
  box-sizing: border-box;
  width: 100%;
  min-width: 1200px;
}

.header-nav-commen-top .header-nav-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 1200px;
}

.header-nav-commen-top .header-nav-center .left-info {
  height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header-nav-commen-top .header-nav-center .left-info .nav-img {
  width: 136px;
  height: 42px;
  cursor: pointer;
}

.header-nav-commen-top .header-nav-center .left-info .schoolname {
  height: 42px;
  line-height: 42px;
  font-size: 24px;
  font-weight: 600;
  color: #027DC3;
  margin: 0;
  padding: 0 0 0 20px;
}

.header-nav-commen-top .header-nav-center .right-city {
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 14px;
  align-items: center;
}

.header-nav-commen-top .header-nav-center .right-city span {
  padding: 0 2px;
  color: #666;
  cursor: pointer;
}

.header-nav-commen-top .header-nav-center .right-city span a {
  color: #666;
  text-decoration: none;
}

.header-nav-commen-top .header-nav-center .right-city span:hover {
  color: #529DF3 !important;
}

.header-nav-commen-top .header-nav-center .right-city span:hover a {
  color: #529DF3 !important;
}

.header-nav-commen {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 50px;
  box-shadow: 0px 2px 4px 0px #DDDDDD;
  background-color: #027DC3;
  box-sizing: border-box;
  width: 100%;
  min-width: 1200px;
}

.header-nav-commen .header-nav-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  width: 1200px;
}

.header-nav-commen .header-nav-center .nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.header-nav-commen .header-nav-center .nav .nav-line {
  width: 3px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-nav-commen .header-nav-center .nav .nav-line .line {
  width: 1px;
  height: 30px;
  background-color: #fff;
}

.header-nav-commen .header-nav-center .nav .nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 25px;
  min-width: 65px !important;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.header-nav-commen .header-nav-center .nav .nav-item .child {
  z-index: 999;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 50px;
  padding-top: 4px;
  color: #666;
  box-shadow: 0px 2px 4px 0px #DDDDDD;
  display: none;
  flex-direction: column;
}

.header-nav-commen .header-nav-center .nav .nav-item .child .children {
  background-color: white;
  padding: 10px 25px;
  min-width: 70px !important;
  border-bottom: 1px solid #DDD;
  font-size: 16px;
  text-align: center;
}

.header-nav-commen .header-nav-center .nav .nav-item .child .children a {
  color: #666666;
  font-size: 16px;
}

.header-nav-commen .header-nav-center .nav .nav-item .child .children:hover a {
  color: #529DF3;
  font-size: 16px;
}

.header-nav-commen .header-nav-center .nav .nav-item a {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.header-nav-commen .header-nav-center .nav .nav-item:hover {
  background-color: #016CA8;
}

.header-nav-commen .header-nav-center .nav .nav-item:hover .child {
  display: flex;
}

.header-nav-commen .header-nav-center .nav .active {
  border-bottom: 2px solid #2e83e3 !important;
  color: #2e83e3 !important;
}

.header-nav-commen .header-nav-center .nav .active a {
  color: #2e83e3 !important;
}

.gkkc-teacher-content {
  width: 100%;
  background-color: #0B66FB;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  background-image: url("/static/zt/img/zt_2023sksy10.png");
  background-repeat: no-repeat;
  background-size: 1920px 946px;
}

.gkkc-teacher-content .teacher-bg {
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gkkc-teacher-content .teacher-bg .s-box {
  width: 1200px;
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.gkkc-teacher-content .teacher-bg .s-box .ts {
  display: flex;
  flex-direction: row;
}

.gkkc-teacher-content .teacher-bg .s-box .ts .item {
  width: 270px;
  height: 400px;
  border-radius: 8px;
  border: 2px solid #ED9A6E;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin-right: 10px;
  text-decoration: none;
}

.gkkc-teacher-content .teacher-bg .s-box .ts .item .img-bg {
  width: 100%;
  height: 270px;
  overflow: hidden;
}

.gkkc-teacher-content .teacher-bg .s-box .ts .item .img-bg img {
  width: 100%;
  background-color: #F8CEA8;
  border: 2px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

.gkkc-teacher-content .teacher-bg .s-box .ts .item .name {
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  margin: 0;
  font-size: 24px;
  color: #D28E69;
}

.gkkc-teacher-content .teacher-bg .s-box .ts .item .ftitle {
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  color: #333;
  font-size: 16px;
}

.eye-protection-mode-btn {
  width: 60px;
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 20px;
  z-index: 999;
  bottom: 40px;
}

.eye-protection-mode-btn .item {
  width: 60px;
  height: 60px;
  font-size: 20px;
  border-radius: 5px;
  background: #fff;
  color: #fff;
  text-align: center;
  margin: 5px 0;
  cursor: pointer;
  position: relative;
  transition: .5s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  padding: 10px;
}

.eye-protection-mode-btn .item .words-bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 5px;
}

.eye-protection-mode-btn .item .words-bg .words {
  transition: .5s;
  line-height: 20px;
  color: #333;
  font-size: 14px;
}

.eye-protection-mode-btn .item:hover {
  background-color: #2e83e3;
}

.eye-protection-mode-btn .item:hover .words-bg .words {
  color: #fff;
}

.eye-protection-model {
  transition: .5s;
  background-color: #FAF1DF !important;
}

.eye-protection-model .header-nav-commen-top-index {
  background-color: #FAF1DF !important;
}

.eye-protection-model .header-nav-commen-index {
  background-color: #FAF1DF !important;
}

.eye-protection-model .header-nav-commen-index .nav-item .child {
  color: #666;
}

.eye-protection-model .header-nav-commen-index .nav-item .child .children {
  background-color: #FAF1DF !important;
  border-bottom: 1px solid #DDD;
}

.eye-protection-model .header-nav-commen-index .nav-item .child .children a {
  color: #333 !important;
}

.eye-protection-model .header-nav-commen-index .nav-item .child .children:hover {
  background-color: #62baec !important;
}

.eye-protection-model .header-nav-commen-index .nav-item .child .children:hover a {
  color: #333 !important;
  font-size: 16px;
}

.eye-protection-model .header-nav-commen-index .nav-item a {
  color: #333 !important;
}

.eye-protection-model .header-nav-commen-index .nav-item:hover {
  background-color: #62baec !important;
}

.eye-protection-model .header-nav-commen {
  background-color: #a3cbe1 !important;
}

.eye-protection-model .header-nav-commen .nav-item .child {
  color: #666;
}

.eye-protection-model .header-nav-commen .nav-item .child .children {
  background-color: #a3cbe1 !important;
  border-bottom: 1px solid #DDD;
}

.eye-protection-model .header-nav-commen .nav-item .child .children a {
  color: #333 !important;
}

.eye-protection-model .header-nav-commen .nav-item .child .children:hover {
  background-color: #62baec !important;
}

.eye-protection-model .header-nav-commen .nav-item .child .children:hover a {
  color: #333 !important;
  font-size: 16px;
}

.eye-protection-model .header-nav-commen .nav-item a {
  color: #333 !important;
}

.eye-protection-model .header-nav-commen .nav-item:hover {
  background-color: #62baec !important;
}

.eye-protection-model .header-nav-commen-top {
  background-color: #FAF1DF !important;
}

.eye-protection-model .xdm-right-tui {
  background-color: #FAF1DF !important;
}

.night-model-home {
  transition: .5s;
  background-color: #191919 !important;
}

.night-model-home .content-safe div, .night-model-home .content-safe a, .night-model-home .content-safe p, .night-model-home .content-safe span, .night-model-home .content-safe strong {
  color: #999 !important;
}

.night-model-home .content-safe .main_box .box ul .on {
  background-color: #191919 !important;
}

.night-model {
  transition: .5s;
  background-color: #191919 !important;
}

.night-model .w1200-father div, .night-model .w1200-father p, .night-model .w1200-father span, .night-model .w1200-father a, .night-model .w1200-father strong {
  color: #999 !important;
}

.night-model .header-nav-commen {
  background-color: #a3cbe1 !important;
}

.night-model .header-nav-commen .nav-item .child {
  color: #666;
}

.night-model .header-nav-commen .nav-item .child .children {
  background-color: #a3cbe1 !important;
  border-bottom: 1px solid #DDD;
}

.night-model .header-nav-commen .nav-item .child .children a {
  color: #333 !important;
}

.night-model .header-nav-commen .nav-item .child .children:hover {
  background-color: #62baec !important;
}

.night-model .header-nav-commen .nav-item .child .children:hover a {
  color: #333 !important;
  font-size: 16px;
}

.night-model .header-nav-commen .nav-item a {
  color: #333 !important;
}

.night-model .header-nav-commen .nav-item:hover {
  background-color: #62baec !important;
}

.night-model .header-nav-commen-top {
  background-color: #191919 !important;
}

.night-model .header-nav-commen-top a {
  color: #999 !important;
}

.night-model .xdm-right-tui {
  background-color: #191919 !important;
}

.xdm-course-detail-buybg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  left: 0;
  top: 0;
  display: none;
}

.xdm-course-detail-buybg .xdmcontent {
  width: 400px;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.xdm-course-detail-buybg .xdmcontent .title-line {
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
  height: 40px;
  padding: 10px 0;
  box-sizing: border-box;
}

.xdm-course-detail-buybg .xdmcontent .title-line .title {
  padding: 0 0 0 10px;
  margin: 0;
  height: 20px;
  line-height: 20px;
  border-left: 3px solid #57b0fb;
  font-size: 18px;
  color: #666;
}

.xdm-course-detail-buybg .xdmcontent .orderno {
  line-height: 40px;
  font-size: 14px;
  color: #333;
}

.xdm-course-detail-buybg .xdmcontent .orderno span {
  color: red;
}

.xdm-course-detail-buybg .xdmcontent .qrcodebg {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.xdm-course-detail-buybg .xdmcontent .qrcodebg .qrcode {
  width: 160px;
  height: 160px;
}

.xdm-course-detail-buybg .xdmcontent .btnline {
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0 20px;
  justify-content: space-between;
}

.xdm-course-detail-buybg .xdmcontent .btnline .btn {
  text-align: center;
  width: 140px;
  height: 40px;
  border: 1px solid #57b0fb;
  border-radius: 4px;
  color: #57b0fb;
  font-size: 18px;
  letter-spacing: 1px;
  cursor: pointer;
  line-height: 40px;
}

.home_hd_bg_close {
  width: 160px !important;
  height: 160px !important;
  left: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  background: transparent !important;
}

.home_hd_bg_close .content-bg {
  width: 160px !important;
  height: 160px !important;
  background-size: 160px 160px !important;
  cursor: pointer;
}

.home_hd_bg_close .content-bg .close {
  top: -30px !important;
  width: 30px !important;
  height: 30px !important;
  content: url("/static/zt/img/zt_wtb_close_g.png") !important;
}

.home_hd_bg_close .content-bg .titleimg {
  width: 94px !important;
  height: 28px !important;
  left: 23px !important;
  top: 45px !important;
  background-size: 94px 28px !important;
}

.home_hd_bg_close .content-bg .p1 {
  margin-top: 0 !important;
  font-size: 10px !important;
}

.home_hd_bg_close .content-bg .p2 {
  margin-top: 10px !important;
  font-size: 12px !important;
}

.home_hd_bg_close .content-bg .item-line {
  display: none !important;
}

.home_hd_bg_close .content-bg .boximg {
  left: 50px !important;
  top: 85px !important;
  width: 44px !important;
  height: 40px !important;
  background-size: 44px 40px !important;
}

.home_hd_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: all .5s;
}

.home_hd_bg .content-bg {
  width: 380px;
  height: 380px;
  background: url("/static/home/img/home_hd_26gk.png") no-repeat top center;
  background-size: 380px 380px;
  position: relative;
  transition: all .5s;
  text-decoration: none;
}

.home_hd_bg .content-bg .p1 {
  width: 100%;
  margin-top: 30px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  line-height: 40px;
}

.home_hd_bg .content-bg .p2 {
  width: 100%;
  margin-top: 50px;
  text-align: center;
  font-size: 24px;
  color: #F41B3A;
  line-height: 40px;
  font-weight: bold;
}

.home_hd_bg .content-bg .item-line {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 50px;
  margin-top: 10px;
}

.home_hd_bg .content-bg .item-line .item {
  width: 80px;
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  background: linear-gradient(to bottom, #fd9979, #f3193c);
  text-decoration: none;
}

.home_hd_bg .content-bg .close {
  position: absolute;
  right: 0;
  top: -70px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  content: url("/static/zt/img/zt_wtb_close.png");
  transition: all .5s;
}

.home_hd_bg .content-bg .titleimg {
  width: 260px;
  height: 79px;
  position: absolute;
  left: 60px;
  top: 130px;
  background: url("/static/home/img/home_hd_qmnh2.png") no-repeat top center;
  background-size: 260px 79px;
  animation: animated-zoomInOut 2s infinite;
}

.home_hd_bg .content-bg .boximg {
  position: absolute;
  left: 130px;
  top: 230px;
  width: 120px;
  height: 113px;
  background: url("/static/home/img/home_hd_qmnh3.png") no-repeat top center;
  background-size: 120px 113px;
  animation: animated-float 2s infinite;
}

@keyframes animated-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes animated-zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}